<template>
  <div class="righttop">
    <el-card>
      <div id="SexCounts" style="width: 600px; height: 500px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { UserSexCounts } from "@/api/user";

export default {
  name: "SexCounts",
  data() {
    return {
      sexCounts: [
        // { value: 735, name: "Direct" },
        // { value: 580, name: "Email" },
        // { value: 484, name: "Union Ads" },
        // { value: 300, name: "Video Ads" },
        // { value: 108, name: "Search Engine" },
      ],
    };
  },
  watch: {
    sexCounts() {
      this.$nextTick(() => {
        this.mycharts();
      });
    },
  },
  mounted() {
    this.load();
    console.log(this);
  },
  beforeDestroy() {
    this.sexCounts = [];
  },
  methods: {
    load() {
      UserSexCounts()
        .then((res) => {
          console.log(res);
          res.data.forEach((element) => {
            element.sex = element.sex == 1 ? "男" : "女";
            this.sexCounts.push({
              value: element.sexCounts,
              name: element.sex,
            });
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    mycharts() {
      let myChart = echarts.init(document.getElementById("SexCounts"));
      myChart.setOption({
        title: {
          text: "已注册用户男女人数",
          subtext: "SexCounts",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "人数",
            type: "pie",
            radius: "50%",
            data: this.sexCounts,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.righttop {
  width: 600px;
  height: 500px;
}
</style>